<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/page_main.css" />
    <link rel="stylesheet" href="./css/page_top.css" />
    <link rel="stylesheet" href="./css/page_header.css" />
    <link rel="stylesheet" href="./css/right_nav.css" />
    <link rel="stylesheet" href="./css/page_main_news.css" />
    <link rel="stylesheet" href="./css/page_main_entrance.css" />
    <link rel="stylesheet" href="./css/page_main_control.css" />
  </head>

  <body>
    <!-- top -->
    <div class="top">
      <div class="top_wrapper area">
        <!-- left-area -->
        <div class="left-area">
          <!-- logo -->
          <h2 class="logo">
            <a href="#">腾讯游戏</a>
          </h2>

          <!-- rocommend game -->
          <div class="recommend">
            <img src="./img/recommend_game.jpg" alt="" />
            <a href="https://lpl.qq.com/es/toc3/" class="recommend-ad">
              <img src="./img/recommend_ad.jpg" alt="" />
            </a>
          </div>
        </div>

        <!-- right area -->
        <ul class="right-area">
          <li class="item">
            <a href="#" class="growth"> 成长守护平台 </a>
          </li>
          <li class="item">
            <a href="#" class="ranking">
              腾讯游戏排行榜
              <div class="dropdown">
                <iframe
                  src="https://game.gtimg.cn/images/js/title/title_game_rank.html"
                  frameborder="0"
                ></iframe>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- right-nav -->
    <div class="right-nav">
      <div class="right-dj">
        <img src="./img/right_dj.png" alt="" />
        <span class="desc">下载王者营地，每天领福利~</span>
      </div>

      <ul class="right-list">
        <li class="item code">
          <img src="./img/right_code.webp" alt="" />
        </li>
        <li class="item weibo">
          <a href="#"></a>
        </li>
        <li class="item gzh">
          <a href="#"></a>
        </li>
        <li class="item sph">
          <a href="#"></a>
        </li>
      </ul>
    </div>

    <div class="main">
      <!-- header -->
      <div class="header">
        <div class="area header_wrapper">
          <!-- left area -->
          <div class="left-area">
            <!-- logo -->
            <h1 class="logo">
              <a href="#">王者荣耀</a>
            </h1>

            <!-- list -->
            <ul class="nav-list">
              <li class="item active">
                <a href="#">
                  游戏资料
                  <span class="desc">DATA</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  内容中心
                  <span class="desc">CONTENTS</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  赛事中心
                  <span class="desc">MATCH</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  百态王者
                  <span class="desc">CULTURE</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  社区互动
                  <span class="desc">COMMUNITY</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  玩家支持
                  <span class="desc">PLAYER</span>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  IP新游
                  <span class="desc">NEW GAMES</span>
                </a>
              </li>
            </ul>

            <!-- search logo -->
            <div class="search">
              <a href="#"></a>
            </div>
          </div>

          <!-- right area -->
          <div class="right-area">
            <a href="#" class="image">
              <img src="./img/header_login.png" alt="" />
            </a>

            <div class="info">
              <a href="#">欢迎登录</a>
              <p>登陆后查看游戏战绩</p>
            </div>
          </div>

          <!-- dropmenu -->
          <div class="dropmenu">
            <div class="inner">
              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">
                    <i class="icon_type icon_type_hot"></i>
                    攻略中心
                  </a>
                </dd>
                <dd class="item">
                  <a href="#">游戏介绍</a>
                </dd>
                <dd class="item">
                  <a href="#">
                    <i class="icon_type icon_type_fans"></i>
                    英雄资料
                  </a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">世界观体验站</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏壁纸</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>

              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">攻略中心</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏介绍</a>
                </dd>
                <dd class="item">
                  <a href="#">英雄资料</a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>

              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">攻略中心</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏介绍</a>
                </dd>
                <dd class="item">
                  <a href="#">英雄资料</a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">世界观体验站</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>

              <dl class="list">
                <dd class="item">
                  <a href="#">
                    <i class="icon_type icon_type_guard"></i>
                    英雄资料
                  </a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">世界观体验站</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏壁纸</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>

              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">攻略中心</a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">世界观体验站</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏壁纸</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>

              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">攻略中心</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏介绍</a>
                </dd>
                <dd class="item">
                  <a href="#">英雄资料</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏壁纸</a>
                </dd>
              </dl>

              <dl class="list">
                <dt class="item">
                  <a href="#">版本介绍</a>
                </dt>
                <dd class="item">
                  <a href="#">攻略中心</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏介绍</a>
                </dd>
                <dd class="item">
                  <a href="#">英雄资料</a>
                </dd>
                <dd class="item">
                  <a href="#">爆料站</a>
                </dd>
                <dd class="item">
                  <a href="#">世界观体验站</a>
                </dd>
                <dd class="item">
                  <a href="#">游戏壁纸</a>
                </dd>
                <dd class="item">
                  <a href="#">开放素材库</a>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <!-- link -->
      <a href="" class="link"></a>

      <!-- main news -->
      <div class="main_wrapper">
        <!-- news -->
        <div class="news-section">
          <!-- banner -->
          <div class="banner">
            <!-- 轮播图 -->
            <ul class="image-list">
              <li class="item">
                <a href="#">
                  <img src="./img/banner_01.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_01.jpeg" alt="" />
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/banner_01.jpeg" alt="" />
                </a>
              </li>
            </ul>

            <!-- 轮播图下方标签 -->
            <ul class="title-list">
              <li class="item">
                <a href="#">领取你的见面礼</a>
              </li>
              <li class="item">
                <a href="#">貂蝉语音抢先听</a>
              </li>
              <li class="item">
                <a href="#">王者炸麦了</a>
              </li>
              <li class="item">
                <a href="#">最佳阵容候选人</a>
              </li>
              <li class="item">
                <a href="#">邮政EMS合作赛</a>
              </li>
            </ul>
          </div>

          <!-- news -->
          <div class="news">
            <ul class="title-list">
              <li class="item active"><a href="#">热门</a></li>
              <li class="item"><a href="#">新闻</a></li>
              <li class="item"><a href="#">公告</a></li>
              <li class="item"><a href="#">活动</a></li>
              <li class="item"><a href="#">赛事</a></li>
              <li class="item more"><a href="#">...</a></li>
            </ul>
            <p class="notice">
              <a href="#" class="nowrap_ellipsis"
                >【霸王别姬-抽限定皮肤】活动开启公告归还借款第三方</a
              >
            </p>
            <ul class="news-list">
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_hot">热门</i>
                  赵云-未来纪元2D设计稿优化进展【老亚瑟的答疑时间】
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_notice">公告</i>
                  5月10日全服不停机更新公告
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_hot">热门</i>
                  狄某有话说 | 4月数据盘点：峡谷违规少，上分没烦恼
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_hot">热门</i>
                  QQ x王者荣耀2022五五朋友节活动
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_hot">热门</i>
                  甜音导航送福利
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_hot">热门</i>
                  五五特辑：我的峡谷固排队友I《营地·人物》
                </a>
                <span class="date">04/30</span>
              </li>
              <li class="item">
                <a href="#" class="desc nowrap_ellipsis">
                  <i class="news_type news_type_notice">公告</i>
                  4月28日全服不停机更新公告
                </a>
                <span class="date">04/30</span>
              </li>
            </ul>
          </div>

          <!-- download -->
          <div class="download">
            <a class="download-btn" href="#"></a>
            <a class="guard-btn" href="#"></a>
            <a class="experience-btn" href="#"></a>
          </div>
        </div>

        <!-- entrance -->
        <ul class="entrance-section">
          <li class="item">
            <a href="#"><img src="./img/entrance_01.jpg" alt="" /></a>
          </li>
          <li class="item">
            <a href="#"><img src="./img/entrance_02.png" alt="" /></a>
          </li>
          <li class="item">
            <a href="#"><img src="./img/entrance_03.jpg" alt="" /></a>
          </li>
          <li class="item">
            <a href="#"><img src="./img/entrance_04.png" alt="" /></a>
          </li>
        </ul>

        <!-- 内容中心 content -->
        <div class="main-section content-section">
          <!-- left -->
          <div class="left-content">
            <!-- header -->
            <div class="section_header">
              <div class="header_left">
                <h3 class="title">内容中心</h3>
              </div>
              <div class="header_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <!-- tab -->
            <div class="tab_control">
              <div class="item active">精品栏目</div>
              <div class="line"></div>
              <div class="item">赛事精品</div>
              <div class="line"></div>
              <div class="item">英雄攻略</div>
            </div>

            <!-- leyword -->
            <div class="tab_keyword">
              <div class="item active">最新</div>
              <div class="item">马菠萝奇闻录</div>
              <div class="item">马菠萝奇</div>
              <div class="item">王者克纸轮</div>
              <div class="item">王者视角</div>
              <div class="item">峡谷460</div>
              <div class="item">百星王者带你非</div>
              <div class="item">王者克纸轮</div>
              <div class="item">王者视角</div>
              <div class="item">峡谷460</div>
              <div class="item">百星王者带你非</div>
              <div class="item">王者克纸轮</div>
              <div class="item">王者视角</div>
              <div class="item">峡谷460</div>
              <div class="item">百星王者带你非</div>
            </div>

            <!-- video -->
            <div class="video-list">
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_01.png" alt="" />
                  <div class="info">
                    <span class="count">471.6万</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">
                  【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷，【马菠萝奇闻录】诸葛上手指南，一个大招贯穿整个峡谷
                </div>
              </a>
            </div>
          </div>

          <!-- right -->
          <div class="right-content">
            <!-- header -->
            <div class="section_header">
              <div class="header_left">
                <h3 class="title title-icon-hero">英雄/皮肤</h3>
              </div>
              <div class="header_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <!-- tab -->
            <div class="tab_control">
              <div class="item active">最新英雄</div>
              <div class="line"></div>
              <div class="item">最新皮肤</div>
              <div class="line"></div>
              <div class="item">周免英雄</div>
            </div>

            <!-- new hero -->
            <div class="new-hero">
              <a href="#" class="album">
                <img src="./img/new_hero.webp" alt="new hero" />
              </a>
              <div class="intro">
                <div class="name">新英雄：桑启</div>
                <div class="date">上线时间：2022.04.14</div>
              </div>
            </div>

            <!-- hero list -->
            <ul class="hero-list">
              <li class="item">
                <a href="#">
                  <img src="./img/hero_01.webp" alt="英雄" />
                  <div class="cover">云缨</div>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/hero_01.webp" alt="英雄" />
                  <div class="cover">云缨</div>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/hero_01.webp" alt="英雄" />
                  <div class="cover">云缨</div>
                </a>
              </li>
              <li class="item">
                <a href="#">
                  <img src="./img/hero_01.webp" alt="英雄" />
                  <div class="cover">云缨</div>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 赛事中心 match -->
        <div class="main-section match-center">
          <!-- left -->
          <div class="left-content">
            <!-- header -->
            <div class="section_header">
              <div class="header_left">
                <h3 class="title title-icon-match">赛事中心</h3>
              </div>
              <div class="header_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <!-- tab -->
            <div class="tab_control">
              <div class="item item_wrap active">KPL</div>
              <div class="line"></div>
              <div class="item item_wrap">挑战者杯</div>
              <div class="line"></div>
              <div class="item item_wrap">K甲联赛</div>
              <div class="line"></div>
              <div class="item item_wrap">城市赛</div>
              <div class="line"></div>
              <div class="item item_wrap">高校联赛</div>
              <div class="line"></div>
              <div class="item item_wrap">TGA</div>
              <div class="line"></div>
              <div class="item item_wrap">微信游戏邀请赛</div>
              <div class="line"></div>
            </div>

            <!-- news -->
            <div class="match-news">
              <!-- left -->
              <a href="#" class="news-left">
                <img src="./img/match_01.jpg" alt="" />
              </a>

              <!-- right -->
              <div class="news-right">
                <div class="title nowrap_ellipsis">
                  坤音四子ONER率队决战峡谷，杨迪爆笑解说聚星之夜.坤音四子ONER率队决战峡谷，杨迪爆笑解说聚星之夜
                </div>
                <div class="subtitle nowrap_ellipsis">
                  斗鱼直播、虎牙直播、触手直播、企鹅电竞四大平台的《王者荣耀》超级主播携手亚运会冠军队伍和KRKPL冠军队伍KZ战队相聚于此，跨界组队超人气偶像明星坤音四子ONER和综艺大咖杨迪，混搭热血竞技与搞笑综艺，佐以逆天的颜值，这几个小时的直播完全不！够！看！啊！
                </div>

                <ul class="news-list">
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                  <li class="item">
                    <span class="news_type_match">KPL</span>
                    <a href="#" class="desc nowrap_ellipsis">
                      战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强战报]首胜在手状态我有!嵊州SZG 3比0
                      战胜桂林NT.hea咖晋级全国8强
                    </a>
                    <span class="date">04-22</span>
                  </li>
                </ul>
              </div>
            </div>

            <!-- video -->
            <div class="video-list">
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
              <a href="#" class="video_item">
                <div class="album">
                  <img src="./img/video_album_02.jpg" alt="" />
                  <div class="info">
                    <span class="count">257</span>
                    <span class="date">2020-08-29</span>
                  </div>
                  <div class="cover">
                    <i class="icon_play"></i>
                  </div>
                </div>
                <div class="desc">火豹夺冠赛季回顾：蜕茧化蝶焕新生，一战功成终捧跃龙杯！</div>
              </a>
            </div>
          </div>

          <!-- right -->
          <div class="right-content">
            <!-- header -->
            <div class="section_header">
              <div class="header_left">
                <h3 class="title title-icon-schedule">KPL赛程</h3>
              </div>
              <div class="header_right">
                <a href="#" class="buy">购票</a>
                <a href="#" class="more">更多</a>
              </div>
            </div>

            <!-- KPL schedule table -->
            <table class="schedule-time">
              <thead>
                <tr>
                  <td>时间</td>
                  <td>战队</td>
                  <td></td>
                  <td>战队</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>5-8 18:00</td>
                  <td>
                    <div class="team">
                      <img src="./img/team_01.png" alt="" />
                    </div>
                    广州TTG
                  </td>
                  <td>VS</td>
                  <td>
                    <div class="team">
                      <img src="./img/team_02.png" alt="" />
                    </div>
                    北京WB
                  </td>
                </tr>
                <tr>
                  <td>5-8 18:00</td>
                  <td>
                    <div class="team">
                      <img src="./img/team_01.png" alt="" />
                    </div>
                    广州TTG
                  </td>
                  <td>VS</td>
                  <td>
                    <div class="team">
                      <img src="./img/team_02.png" alt="" />
                    </div>
                    北京WB
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- match-schedule -->
            <a href="#" class="match-sehedule">
              <img src="./img/match_schedule.webp" alt="" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
